<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" type="text/css" href="guanyuan/css/gys/style.css">
		<link rel="stylesheet" type="text/css" href="guanyuan/css/gys/index.css">
	</head>
<body>
	<!-- <div><h3>Logo</h3></div> -->
	<div id="box" class="box">
		<ul class="f-nav f-width" id="f-nav">
		<!-- 
			<li onclick="clickMenu('home')">首页</li>
			<li onclick="clickMenu('index.html')">袁天罡奇门遁甲</li>
			<li>观元山庄</li>
			<li>词坛祭拜</li>
			<li>天罡符箓</li>
			<li>十二章纹</li>
			<li>商业连锁</li>  
		-->
			
		</ul>
	</div>
	<div id="content"></div>

	</script><script type="text/javascript" src="guanyuan/js/jquery.min.js"></script>
	<script type="text/javascript" src="guanyuan/js/jquery-nav.js"></script>

</body>
<script type="text/javascript">

	var baseurl="/tgqmdj/";
	var width = document.body.clientWidth;
	
	width=Number(width/7);
	
	
	$("#content").load(baseurl+"/home");
	
	
	treeMenu();
 	function treeMenu(){
		$.ajax({
			url:"/tgqmdj/selectMenu",
			type:"json",
			data:{},
			success:function(ret){
				var menu = ret.data;
				var menutree ='';
				for(var i=0;i<menu.length;i++){	
					menutree += menuhtml(i,menu[i]);
				}
				$("#f-nav").html(menutree+'<div id="sidelineid" style="width:'+width+'px" class="sideline"></div>');
				
			},
			error:function(e){
				alert("e:"+e);
			}
			
			
		});
	}
	
	
	function menuhtml(i,menudata){
		
		var menu='<li id="munu_'+i+'" style="width:'+width+'px;" onclick="clickMenu('+i+',\''+menudata.url+'\')">'+menudata.menuname+'</li>';
		return menu;
	}
	

	function clickMenu(mid,url){
		//$("#munu_"+mid+"").html("ok");
		if(mid>0){
			var countmove = width*mid;
			for(var i = 0;i<countmove;i++){
				$("#sidelineid").css("left",i++);
			}
		}else{
			$("#sidelineid").css("left",0);
		}

	    if(url==='home'){
            $("#content").load(baseurl+url);
		}
	    
	}
	

	
</script>
</html>